<script setup lang="ts">
import { User } from "@/api/octp/models/user";
import { getUserById, getUserList, registerUser } from "@/api/octp/routes/user";
import { ZResponsePageDataResult } from "@/utils/http/response";
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";

const curRoute = useRoute();

const state = reactive<ZResponsePageDataResult<User>>({
  list: [],
  total: 0,
});

async function getDetails(id: number) {
  const user = await getUserById({ id });
  console.log(user);
}

const username = ref("");
const password = ref("");
const userno = ref("");

async function register() {
  await registerUser({
    name: username.value,
    password: password.value,
    num: userno.value,
  });
}

onMounted(async () => {
  const { list, total } = await getUserList({ page: 1, limit: 20 });
  state.list = list;
  state.total = total;
});
</script>

<template>
  <div class="test">
    Hello world ?? | {{ curRoute.fullPath }}

    <h1>{{ state.total }}</h1>

    姓名 <input v-model="username" /> 密码 <input v-model="password" /> 学号
    <input v-model="userno" />
    <button @click="register">注册</button>

    <ul>
      <li
        v-for="user in state.list"
        :key="user.id"
        @click="getDetails(user.id)"
      >
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.test {
  height: 1900px;
  /* border: 1px red solid; */
}
</style>
